<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  第一步引入 vue.js -->
    <script src="js/vue.js"></script>
    <style>
        .r{
            height: 100px;
            width: 100px;
            background-color: red;
        }
        .b{
            height: 100px;
            width: 100px;
            background-color: blue;
        }
        .v-enter {

        }

        .v-leave-to {
            opacity: 0;
        }

        /**
        v-enter-active入场动画时间段
        v-leave-active 离场时间段
         */
        .v-enter-active {

        }

        .v-leave-active {
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
    
    <div id="app">
<!--         第一种方式-->
        <a href="hello.html" @click.prevent="flag=!flag">登陆</a>
        <a href="hello.html" @click.prevent="flag=!flag">注册</a>
<!--         当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。-->
        <transition  mode="out-in">
            <p  v-if="flag" class="r" key="login">登陆</p>
            <p v-else class="b" key="register">注册</p>
        </transition>

<!--         第二种方式 实现组件的切换-->
        <a href="hello.html" @click.prevent="tag='login'">登陆</a>
        <a href="hello.html" @click.prevent="tag='register'">注册</a>

        <transition  mode="out-in">
            <component :is="tag"></component>
        </transition>
    </div>

    <template id="login">
        <div>
            <p class="b">登陆页面 </p>
        </div>
    </template>

    <template id="register">
        <div>

            <p class="r">注册页面 </p>
        </div>
    </template>

    <script>

// vm 表示的是 VM
        var vm=new Vue({
            el:"#app" ,
            data:{
               flag:true,
                tag:'login'
            },
            components:{
                login:{
                    template:"#login"
                },
                register:{
                    template: "#register"
                }
            }

        });
    
// Vue 中的data 属性表示的就是 Model 

    </script>

</body>
</html>